<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>

<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.10.2.min.js"
	th:src="@{/js/jquery-1.10.2.min.js}"></script>


<!-- 新 Bootstrap 核心 CSS 文件 -->
<link
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
	rel="stylesheet" />

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(function() {

		var height = $(window).height();

		var header_height = (height / 8) * 1;
		var iframe_height = (height / 8) * 7;

		$(".header").height(header_height);
		$(".iframe1").height(iframe_height);

		$(".henry_choose").on("click", function() {
			$(".henry_choose").removeClass("active");
			$(this).addClass("active");
			var url = $(this).attr("data-url");
			$(".iframe1").attr("src", url);
		});
	});
</script>
</head>
<style>
<!--
.iframe1 {
	border: none;
	border: 1px #ccc solid;
	box-sizing: border-box;
	width: 100%;
}

* {
	margin: 0;
	padding: 0;
	list-style: none;
}
-->
</style>
<body style="overflow: hidden;">

	<!--  <h1 th:inline="text">Hello.v.2</h1>  
        <p th:text="${hello}"></p>   -->

	<!-- 导航 -->
	<div class="header">
		<ol class="breadcrumb">
			<!-- 	<li class="active">Data</li> -->
			<li class="henry_choose" data-url="tools/cssAnimate"><a href="#">Animate</a></li>
			<li class="henry_choose" data-url="tools/blank"><a href="#">空白页</a></li>
			<li class="henry_choose" data-url="http://tool.oschina.net/apidocs/apidoc?api=jquery"><a href="#">jqueryApi</a></li>
			<li class="henry_choose" data-url="http://tool.oschina.net/codeformat/json"><a href="#">json格式化</a></li>
			<li class="henry_choose" data-url="http://tool.oschina.net/encrypt?type=3"><a href="#">BASE64</a></li>
			<li class="henry_choose" data-url="http://tool.oschina.net/qr"><a href="#">二维码</a></li>
			<li class="henry_choose" data-url="http://tool.oschina.net/commons?type=3"><a href="#">RGB颜色</a></li>
			<li class="henry_choose" data-url="http://tool.oschina.net/hexconvert"><a href="#">进制转换</a></li>
			<li class="henry_choose" data-url="http://tool.oschina.net/apidocs/apidoc?api=jdk-zh"><a href="#">jdk6中文文档</a></li>
			<li class="henry_choose" data-url="http://tool.oschina.net/apidocs/apidoc?api=android/reference"><a href="#">Android文档</a></li>
			<li class="henry_choose" data-url="http://tool.oschina.net/apidocs/apidoc?api=Spring-3.1.1"><a href="#">spring3</a></li>
			<li class="henry_choose" data-url="http://tool.oschina.net/apidocs/apidoc?api=mysql-5.5-en"><a href="#">mysql5.5</a></li>
			<li class="henry_choose" data-url="http://tool.oschina.net/apidocs/apidoc?api=struts-2.3.4"><a href="#">Struts2</a></li>
			<li class="henry_choose" data-url="http://tool.oschina.net/apidocs/apidoc?api=hibernate-4.1.4"><a href="#">Hibernate4</a></li>

		</ol>


	</div>

	<iframe src="tools/cssAnimate" class="iframe1"></iframe>

</body>
</html>